<!-- 个股详情 -->
<template>
  <div class="individual">
    <el-input placeholder="输入指数代码" v-model="$store.state.indexCode" clearable class="individualInput">
      <el-button slot="append" icon="el-icon-search" @click="goHSIndex"></el-button>    
    </el-input>
    <div class="index_div" v-for="(item,index) in $store.state.stockList" :key="index">
      <div class="index-top index_title clearfix">
        <h1 class="index_name fl">{{item.name}}({{item.type}}:{{item.symbol}})</h1>
            <!-- http://api.money.126.net/data/feed/MARKET_HS?callback=ne37ff52c3f6e748 -->
            <!-- <span> {{item.time}}</span> -->
            <span class="index_time">{{SPTime.status}} {{SPTime.update}}</span>
          <el-button type="danger" @click="AddMyStock(scope.row.id)" class="addstock fr">+自选</el-button>
          <!-- <a href="#"><i class="el-icon-plus">自选</i></a> -->
      </div>
      <div class="index_content">
        <div class="index_btm clearfix">
          <div class="index_point fl">
            <div class="price">{{item.price}}
              <span v-if="item.percent>0"><i class="el-icon-top"></i></span>
              <span v-else-if="item.percent<0"><i class="el-icon-bottom"></i></span>
            </div>
            <!--  style="color:1===1?'red':'green'" -->
            <div class="change">
              <span>{{item.updown}}</span>
              <span>{{(item.percent*100).toFixed(2)+'%'}}</span>
              <!-- <span class="change_price">-0.54</span>
              <span class="change_percent">-0.54</span> -->
            </div>
          </div>
          <table class="index-table fr">
            <tbody>
              <tr class="tab-up">
                <td>
                  <p>今开：<strong>{{item.open}}</strong></p>
                  <p>昨收：<strong>{{item.yestclose}}</strong></p>
                </td>
                <td>
                  <p>最高：<strong>{{item.high}}</strong></p>
                  <p>最高：<strong>{{item.low}}</strong></p>
                </td>
                <td>
                  <p>成交量：<strong>{{(item.volume/1000000).toFixed(2)}}万手</strong></p>
                  <p>成交额：<strong>{{(item.turnover/100000000).toFixed(2)}}亿</strong></p>
                </td>
              </tr>
              <tr>
                <!-- <span>{{SPTime.status}} {{SPTime.update}}</span> -->
                <td>上涨家数：<span class="red">662家</span></td>
                <td>平盘家数：<span class="gray">662家</span></td>
                <td>下跌家数：<span class="green">662家</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!-- Echarts -->
    <el-tabs  v-model="hsindexActiveName">
      <el-tab-pane label="分时" name="fs">
        <Disease/>
      </el-tab-pane>
      <el-tab-pane label="日K(1月)" name="day_month">
        <K/>
      </el-tab-pane>
      <el-tab-pane label="日K(1季)" name="day_season">
        <Disease/>
      </el-tab-pane>
      <el-tab-pane label="日K(半年)" name="day_halfyear">
        <!-- <Disease/> -->
      </el-tab-pane>
      <el-tab-pane label="周K" name="week">
        <!-- <Disease/> -->
      </el-tab-pane>
      <el-tab-pane label="月K" name="month">
        <!-- <Disease/> -->
      </el-tab-pane>
    </el-tabs>
    <div class="individualMarket">

    </div>
  </div>
</template>

<script>
import Disease from '../echarts/Disease'
import K from '../echarts/K'
import jsonp from 'jsonp'
export default {
  data() {
    return {
      hsindexActiveName:'fs',
      SPTime:{}
    }
  },
  methods:{
    goHSIndex(){
      // 编程式导航
      // const test=this.$store.state.indexCode;
      // console.log(test);
      this.$router.push(`/market/${this.$store.state.indexCode}`)
      this.$store.commit('setIndexCode',this.$store.state.indexCode)
      this.$store.dispatch('selectStock',this.$store.state.indexCode)
      this.getSPTime()
      // ERROR!!!Legacy octal literals are not allowed in strict mode 
      // this.$router.push({name:'individual',params:{stockCode:0000002}})
    },
    getSPTime(){
      jsonp('http://api.money.126.net/data/feed/MARKET_HS,UD_SHAZ,UD_SHAD,UD_SHAP',{},(err,res)=>{
        if(!err){
          console.log(res);
          this.SPTime=res.MARKET_HS
          console.log(this.SPTime);
        }
      });
    },
    getIndividualMarket(){
      jsonp('http://hq.sinajs.cn/list=sh601006',{},(err,res)=>{
        if(!err){
          console.log(res);
        }
      })
    }
  },
  created(){
    this.goHSIndex()
    console.log("GEGUHANGQING--------------------------------------------");
    
    this.getIndividualMarket()
  },
  components:{
    Disease,
    K
  }
}
</script>

<style scoped>
.individual {
  margin:20px auto;
}
.individualInput {
  width:600px;
  margin-left:20px;
}
.index-top {
  margin:10px 0;
}
.addstock {
  margin-right:70px;
}
.index_bwn {
  padding:15px 10px;
  height:40px;
  line-height:35px;
}
.index_point .change {
  display: flex;
  justify-content: space-evenly;
  margin:10px 20px;
  color:#ee5f58;
  font-size: 16px;
}
.index_time {
  margin-left:20px;
  color:#727883;
  font-size: 14px;
  line-height: 40px;
}
.index_btm table {
  margin: 0 auto;
  width: 610px;
  font-size: 13px;
  text-align: center;
}
.tab-up td{
  line-height:25px;
}
.index_div .el-tab {
  margin:25x 10px 0 10px;
}
.el-tabs__content {
  margin-top: 30px;
}
</style>
